<!--控制组件显示隐藏-->
<div class="layui-form-item media-box" id="addon-box-{$form.name}">
    <style>
        .media-box .layui-card{padding-top: 30px;}
        .media-box .box{
            font-size: 16px;line-height: 80px;text-align: center;width: 90%;border: #e7e7eb 1px solid;margin-bottom: 7px;
            cursor: pointer;
        }
        .media-box .box i{color: #B2B2B2;}
        .media-box .box:hover{background-color: #f4f6f9; color: var(--green);}
        .media-box .box:hover i{color: var(--green);}
        .media-content img{width: 180px;border: #e7e7eb 1px solid;}
        .media-content .addon-logo{width: 30px;margin-right: 15px;}
        .media-box video{width: 210px;height: 169px;}
    </style>
    <label class="layui-form-label {$form['extra_class']??''}">
        {if condition="is_int(strpos($form['extra_attr'], 'required'))"}
        <span class="text-danger">*</span>
        {/if}
        {$form['title']}
    </label>
    <div class="layui-input-block">
        <input type="hidden" name="{$form.name}" value="{$form['value'] ?? ''}">

        <div class="layui-card">
            <div class="layui-card-body">
                <div class="layui-row">
                    <div class="media-content">
                        <!--选中结果-->
                    </div>
                    <hr {if condition="!isset($form['options']['id'])"} style='display: none;' {/if}>

                    <div class="layui-col-xs6 layui-col-md3">
                        <div class="box">
                            <i class="fa fa-cube"></i>&nbsp;选择应用
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <script>
        if(typeof setAddonValue === 'undefined'){
            var setAddonValue = function(res, field){
                console.log(res);
                $("input[name={$form.name}]").val(res.addon);
                $("#addon-box-{$form.name} .media-content").html('<img src="'+res.logo+'" class="addon-logo">'+res.name);
                $("#addon-box-{$form.name} hr").show();
            };
        }

        $("#addon-box-{$form.name}").on('click', '.box', function () {
            layer.open({
                type: 2,
                title: '选择应用',
                shadeClose: false,
                shade: 0.8,
                area: ['900px', '576px'],
                content: ['/system/material/addon?&field={$form["name"]}', 'no'] //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
            });
        });
    </script>
</div>